@n3/css-base

@n3/css-base

Переменные стилей для приложений на базе @n3/kit.

import {
  colors,
  dropdown,
  fonts,
  grid,
  indents,
  input,
  layout,
} from '@n3/css-base';

colors

Базовые цвета.

export const NEUTRAL_DEFAULT = '#333333';
export const NEUTRAL_SECONDARY = '#727272';
export const NEUTRAL_INPUT = '#C4C4C4';
export const NEUTRAL_INACTIVE = '#E7E7E7';
export const NEUTRAL_BACKGROUND = '#F7F7F7';
export const NEUTRAL_WHITE = '#FFFFFF';

export const ACTION_DEFAULT = '#1976D2';
export const ACTION_HOVER = '#1359AA';
export const ACTION_PRESSED = '#064186';
export const ACTION_INACTIVE = '#AACCED';
export const ACTION_BACKGROUND = '#F0F6FC';

export const ERROR_DEFAULT = '#D44545';
export const ERROR_HOVER = '#B63C3C';
export const ERROR_PRESSED = '#992929';
export const ERROR_INACTIVE = '#EAC0C0';
export const ERROR_BACKGROUND = '#FBF0F0';

export const SUCCESS_DEFAULT = '#48A848';
export const SUCCESS_BACKGROUND = '#ECF9EC';

export const PROGRESS_DEFAULT = '#F0AD1C';
export const PROGRESS_BACKGROUND = '#FEF8EA';

export const WARNING_DEFAULT = '#F36E2B';
export const WARNING_BACKGROUND = '#FDF6ED';

dropdown

Общие стили выпадающих списков.

export const DROPDOWN_BOX_SHADOW = '0px 4px 8px rgba(148, 148, 148, 0.24)';
export const DROPDOWN_BORDER_RADIUS = 4;
export const DROPDOWN_BORDER = `1px solid ${NEUTRAL_INACTIVE}`;

fonts

Шрифты.

fonts.H1;
fonts.H2;
fonts.H3;
fonts.H4;
fonts.H5;
fonts.DEFAULT;
fonts.CAPTION;
fonts.LABEL;
fonts.BUTTON;
fonts.FONT_SMALL;
fonts.INPUT;
fonts.INPUT_SMALL;
fonts.NUMBER;

const StyledHeading = styled.div({
  ...fonts.H1,
});

indents

Отступы.

export const INDENT_BASE = 8;

export const getIndent = (number) => number * INDENT_BASE;

export const INDENT_1 = getIndent(1);
export const INDENT_2 = getIndent(2);
export const INDENT_3 = getIndent(3);
export const INDENT_4 = getIndent(4);
export const INDENT_5 = getIndent(5);
export const INDENT_6 = getIndent(6);
export const INDENT_7 = getIndent(7);
export const INDENT_8 = getIndent(8);

grid

Сетка.

export const COLS_COUNT = 12;

export const COL_INNER_WIDTH = 80;
export const COLS_INDENT = INDENT_4;
export const COLS_INDENT_HALF = COLS_INDENT / 2;
export const COL_OUTER_WIDTH = COL_INNER_WIDTH + COLS_INDENT;

export const GRID_MAX_WIDTH = COL_OUTER_WIDTH * COLS_COUNT;

export const SCREEN_WIDTH_SM = 575.98;
export const SCREEN_WIDTH_MD = 767.98;
export const SCREEN_WIDTH_LG = 991.98;
export const SCREEN_WIDTH_XL = 1199.98;

input

Общие переменные полей ввода.

export const BORDER_COLOR = NEUTRAL_INPUT;
export const BORDER_COLOR_HOVER = ACTION_DEFAULT;
export const BORDER_COLOR_FOCUS = ACTION_PRESSED;
export const BORDER_COLOR_WARNING = PROGRESS_DEFAULT;
export const BORDER_COLOR_ERROR = ERROR_DEFAULT;
export const BG_COLOR = NEUTRAL_WHITE;
export const BG_COLOR_WARNING = PROGRESS_BACKGROUND;
export const BG_COLOR_ERROR = ERROR_BACKGROUND;
export const BG_COLOR_FOCUS = NEUTRAL_WHITE;
export const BG_COLOR_DISABLED = NEUTRAL_BACKGROUND;
export const PLACEHOLDER_COLOR = NEUTRAL_INPUT;
export const TEXT_COLOR = NEUTRAL_DEFAULT;

export const HEIGHT = 40;
export const HEIGHT_SMALL = 32;

layout

export const HEADER_HEIGHT = 64;
export const TOGGLE_BUTTON_WIDTH = 50;
export const SIDEBAR_WIDTH = 256;
export const SIDEBAR_WIDTH_COLLAPSED = 52;